<template>
	<view class="container">
		<scroll-view scroll-y class="edit-form">
			<view class="form-item">
				<input class="title-input" v-model="article.title" placeholder="请输入文章标题" maxlength="50" />
			</view>

			<view class="form-item">
				<view class="cover-upload" @click="chooseCover">
					<image v-if="article.coverImage" :src="article.coverImage" mode="aspectFill"
						class="cover-preview" />
					<view v-else class="upload-placeholder">
						<uni-icons type="image" size="32" color="#999"></uni-icons>
						<text>上传封面图</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<textarea class="desc-input" v-model="article.description" placeholder="请输入文章简介(选填)" maxlength="200" />
			</view>

			<view class="form-item">
				<textarea class="content-input" v-model="article.content" placeholder="请输入文章内容..." maxlength="10000" />
			</view>
		</scroll-view>

		<view class="bottom-bar">
			<button class="draft-btn" @click="saveDraft">保存草稿</button>
			<button class="publish-btn" @click="publishArticle">发布文章</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request.js'

onMounted(() => {
	// 检查草稿有没有内容
	const draft = uni.getStorageSync("article-draft")
	// 如果有，就赋值
	if (draft) {
		article.value.title = draft.title
		article.value.content = draft.content
		article.value.coverImage = draft.coverImage
		article.value.description = draft.description
	}
})

const article = ref({
	title: '',
	content: '',
	coverImage: '',
	description: ''
})

const chooseCover = async () => {
	try {
		const temp = await uni.chooseImage({
			count: 1,
			sizeType: ['compressed']
		})

		const url = await request.uploadFile(temp.tempFilePaths[0])

		article.value.coverImage = url.data
	} catch (e) {
		uni.showToast({
			title: e || '其他错误',
			icon: 'none'
		})
		console.error(e)
	}
}

const saveDraft = async () => {
	if (!article.value.title || !article.value.content) {
		uni.showToast({
			title: '请填写标题和内容',
			icon: 'none'
		})
		return
	}

	try {
		// 存到本地缓存
		uni.setStorageSync("article-draft", article.value)
		uni.showToast({
			title: '保存成功',
			icon: 'success'
		})
	} catch (e) {
		uni.showToast({
			title: e || '保存失败',
			icon: 'none'
		})
	}
}

const publishArticle = async () => {
	if (!article.value.title || !article.value.content || !article.value.coverImage) {
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		})
		return
	}

	try {
		await request.post('/article/publish', article.value)
		uni.showToast({
			title: '发布成功',
			icon: 'success'
		})
		uni.removeStorageSync("article-draft")
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	} catch (e) {
		uni.showToast({
			title: e || '发布失败',
			icon: 'none'
		})
	}
}
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.edit-form {
	flex: 1;
	padding: 30rpx;
	box-sizing: border-box;
	overflow-y: auto;

	.form-item {
		margin-bottom: 30rpx;

		input,
		textarea,
		.cover-upload {
			box-sizing: border-box;
		}
	}

	.title-input {
		width: 100%;
		height: 70rpx;
		font-size: 36rpx;
		font-weight: bold;
		padding: 0 20rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 16rpx;
		border: 1px solid rgba(200, 200, 200, 0.3);
	}

	.cover-upload {
		width: 100%;
		height: 400rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 10rpx;
		border: 1px solid rgba(200, 200, 200, 0.3);

		.cover-preview {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}

		.upload-placeholder {
			text-align: center;
			color: #999;
			font-size: 28rpx;
		}
	}

	.desc-input {
		width: 100%;
		height: 200rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 16rpx;
		padding: 20rpx;
		font-size: 28rpx;
		border: 1px solid rgba(200, 200, 200, 0.3);
	}

	.content-input {
		width: 100%;
		height: 600rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 16rpx;
		padding: 20rpx;
		font-size: 28rpx;
		border: 1px solid rgba(200, 200, 200, 0.3);
	}
}

.bottom-bar {
	position: relative;
	padding: 20rpx;
	display: flex;
	gap: 20rpx;
	background: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

	.draft-btn,
	.publish-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.draft-btn {
		background: #f5f5f5;
		color: #666;
	}

	.publish-btn {
		background: #36D1DC;
		color: #fff;
	}
}
</style>